<!--
 * @Description: 邀请福利
 * @Author: liu (1427179517@qq.com)
 * @Date: 2023-05-04 16:46:58
 * @LastEditors: liu (1427179517@qq.com)
 * @LastEditTime: 2023-05-13 19:04:07
 * @FilePath: \jiekuan-app\src\subPages\other\inviteWelfare.vue
-->

<template>
	<div class="page">
		<div class="page-header">
			<u-navbar title="邀请福利" :background="nav_background" title-color="#fff" back-icon-color="#fff" :height="60"
				:border-bottom="false">
				<span slot="right" class="invite_code" @click="handleClick({ type: 'invitationQrCode' })">邀请二维码
				</span>
			</u-navbar>
		</div>
		<div class="page-content u-p-20">
			<div class="u-flex u-row-between u-col-center">
				<div class="u-flex u-row-between u-col-center nickname">
					<image :src="info_data.icon" class="avatar u-m-r-20" alt="" />
					<span>{{ info_data.nickname }}</span>
				</div>
				<div class="out" @click="apiLogout">登出</div>
			</div>
			<!-- 金额 -->
			<div class="u-m-t-50 box u-p-t-45 u-p-b-30">
				<div class="u-flex u-m-b-35">
					<div class="u-flex-1 money_box">
						<span>{{ info_data.totalBonus }}</span>
						<div class="u-m-t-14 money_box_text">累计获得（元）</div>
					</div>
					<div class="u-flex-1 money_box">
						<span>{{ info_data.withdrawAble }}</span>
						<div class="u-m-t-14 money_box_text">可提现（元）</div>
					</div>
					<div class="u-flex-1 money_box">
						<span>{{ info_data.totalInvites }}</span>
						<div class="u-m-t-14 money_box_text">累计邀请（人）</div>
					</div>
				</div>
				<button class="withdraw" @click="handleClick({ type: 'withdrawal' })">立即提现</button>
			</div>
			<!-- banner -->
			<div class="invite_banner u-m-t-20 u-p-t-50">
				<div class="u-m-l-32">邀好友 赚现金</div>
				<div class="u-m-t-48 text_box u-m-l-20">每邀请1人加入会员，都可以获得<span class="red">50%奖励</span></div>
			</div>
			<!-- 奖励规则 -->
			<div class="box u-m-t-30 rule">
				<div class="title">奖励规则</div>
				<div class="u-m-t-36" v-if="info_data.sysRule">
					<u-parse :html="info_data.sysRule.content"></u-parse>
				</div>
			</div>
			<div class="box u-m-t-20">
				<div class="records u-flex u-row-between" v-for="(item, index) in list" :key="index"
					@click="handleClick({ type: item.click })">
					<span>{{ item.name }}</span>
					<image src="../../static/images/next_icon.png" alt="" class="next_icon" />
				</div>
			</div>
			<!-- 邀请二维码 -->
			<div class="promotion u-m-t-20">
				<div class="u-flex all-center">
					<image src="../../static/images/invite_logo.png" alt="" class="invite_logo u-m-r-24" />
					<div>
						<div>小缘</div>
						<div class="text u-m-t-30">高端线下交友平台</div>
					</div>
				</div>
				<div class="u-m-t-52 promotion_code_box">
					<div>我的推广码</div>
					<div class="u-m-t-42 text">{{info_data.inviteCode}}</div>
					<image :src="info_data.androidUrl" class="u-m-t-52 promotion_code"
						@longpress="saveImg(info_data.inviteCode)" />
					<div class="copy u-m-t-28" @click="handleClick({ type: 'copy' })">复制链接</div>
					<button class="save u-m-t-40" @click.stop="saveImg(info_data.inviteCode)">下载或长按保存</button>
				</div>
			</div>
		</div>
		<div class="page-footer"></div>
	</div>
</template>

<script>
	export default {
		name: 'InviteWelfare', // 页面名称
		components: {}, // 挂载组件
		props: {}, // 组件传值
		data() {
			return {
				nav_background: {
					backgroundImage: 'linear-gradient(45deg, #5735B1, #3D4AD7)'
				},
				platform: 1, // 用户机型 1：ios 2：安卓
				list: [{
						name: '邀请记录',
						click: 'invite_records'
					},
					{
						name: '提现记录',
						click: 'withdrawal_records'
					},
				],
				info_data: {}, // 信息数据
			}
		},
		computed: {}, // 计算机属性 类似与data概念
		watch: {}, // 监控data中数据变化
		created() {}, // 生命周期-创建完成(可以访问当前this实例)
		mounted() {}, // 生命周期-挂载完成(可以访问DOM元素)
		methods: {
			// 获取用户机型
			getSystemInfo() {
				const that = this
				uni.getSystemInfo({
					success: (res) => {
						if (res.platform === 'ios') {
							that.platform = 1
						} else {
							that.platform = 2
						}
					},
				})
			},
			handleClick(options) {
				const {
					type,
					query = {}
				} = options
				switch (type) {
					case 'invite_records': // 邀请记录
						this.$jump({
							name: 'invite_records'
						})
						break
					case 'withdrawal_records': // 提现记录
						this.$jump({
							name: 'withdrawal_records'
						})
						break
					case 'invitationQrCode': // 邀请二维码
						this.$jump({
							name: 'invitationQrCode'
						})
						break
					case 'copy': // 复制链接
						if (this.platform === 1) {
							this.$copyText(this.info_data.iosUrl)
						} else {
							this.$copyText(this.info_data.androidUrl)
						}
						break
					default:
						this.$jump({
							name: type,
							query
						})
						break
				}
			},
			// 退出登录
			apiLogout() {
				this.$u.api.logout().then((res) => {
					this.$u.toast('退出成功~')
					setTimeout(() => {
						uni.clearStorageSync()
						this.$jump({
							name: 'login',
							type: 'replaceAll'
						})
					}, 2000)
				})
			},
			// 获取用户邀请信息
			apiGetFetchMemberInviteInfo() {
				this.$u.api.GetFetchMemberInviteInfo().then((res) => {
					console.log("123456789");
					console.log(res);
					this.info_data = res.data
				})
			},
			saveImg(e) {
				wx.showLoading({
					title: '保存中...',
				})
				wx.downloadFile({
					url: e,
					success: function(res) {
						// 图片保存到本地
						wx.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function(data) {
								wx.hideLoading()
								wx.showModal({
									title: '提示',
									content: '已存入手机相册',
									showCancel: false,
								})
							},
							fail: function(err) {
								if (
									err.errMsg === 'saveImageToPhotosAlbum:fail:auth denied' ||
									err.errMsg === 'saveImageToPhotosAlbum:fail auth deny'
								) {
									// 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
									wx.showModal({
										title: '提示',
										content: '需要您授权保存相册',
										showCancel: false,
										success: (modalSuccess) => {
											wx.openSetting({
												success(settingdata) {
													console.log('settingdata',
														settingdata)
													if (settingdata
														.authSetting[
															'scope.writePhotosAlbum'
															]) {
														wx.showModal({
															title: '提示',
															content: '获取权限成功,再次点击图片即可保存',
															showCancel: false,
														})
													} else {
														wx.showModal({
															title: '提示',
															content: '获取权限失败，将无法保存到相册哦~',
															showCancel: false,
														})
													}
												},
												fail(failData) {
													console.log('failData',
														failData)
												},
												complete(finishData) {
													console.log('finishData',
														finishData)
												},
											})
										},
									})
								}
							},
							complete(res) {
								wx.hideLoading()
							},
						})
					},
				})
			},
		}, // 挂载一些方法
		onLoad(options) {
			this.getSystemInfo()
			this.apiGetFetchMemberInviteInfo()
			console.log('onLoad', options, Date.now())
		}, // 生命周期回调—监听页面加载
		onShow() {}, // 生命周期回调—监听页面显示
		onReady() {}, // 生命周期回调—监听页面初次渲染完成
		onHide() {}, // 生命周期回调—监听页面隐藏
		onUnload() {}, // 生命周期回调—监听页面卸载
	}
</script>

<style lang="scss" scoped>
	.invite_code {
		width: 160rpx;
		height: 50rpx;
		background: #fcc307;
		border-radius: 25rpx;
		font-size: 25rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #ffffff;
		text-align: center;
		display: inline-block;
		line-height: 50rpx;
		margin-right: 18rpx;
	}

	.page-content {
		background: #f0f0f0;
	}

	.nickname {
		font-size: 25rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #000000;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.out {
		width: 80rpx;
		height: 45rpx;
		background: #969696;
		border-radius: 23rpx;
		font-size: 21rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #ffffff;
		line-height: 45rpx;
		text-align: center;
	}

	.box {
		background: #ffffff;
		border-radius: 8rpx;
	}

	.money_box {
		font-size: 31rpx;
		font-family: Microsoft YaHei UI;
		font-weight: bold;
		color: #d7443e;
		text-align: center;
	}

	.money_box_text {
		font-size: 21rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #323232;
	}

	.withdraw {
		width: 260rpx;
		height: 70rpx;
		background: #fcc307;
		border: none;
		border-radius: 35rpx;
		font-size: 33rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #ffffff;
		line-height: 70rpx;
	}

	.invite_banner {
		width: 100%;
		height: 240rpx;
		background-image: url(../../static/images/invite_banner.png);
		background-size: cover;
		background-repeat: no-repeat;
		font-size: 52rpx;
		font-family: FZZongYi-M05S;
		font-weight: 400;
		color: #ffffff;

		.text_box {
			padding: 0 15rpx;
			display: inline-block;
			height: 50rpx;
			background: #ffffff;
			border-radius: 25rpx;
			font-size: 21rpx;
			font-family: Microsoft YaHei UI;
			font-weight: bold;
			color: #323232;
			line-height: 50rpx;
			text-align: center;
		}
	}

	.rule {
		padding: 22rpx 34rpx 32rpx 23rpx;
		font-size: 25rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #323232;
		line-height: 42rpx;

		.title {
			font-size: 31rpx;
			font-family: Microsoft YaHei UI;
			font-weight: 400;
			color: #323232;
		}
	}

	.red {
		color: #ff0000;
	}

	.records {
		padding: 30rpx 25rpx;
		font-size: 31rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #323232;
	}

	.records:first-child {
		border-bottom: 1rpx solid #f0f0f0;
	}

	.next_icon {
		width: 16rpx;
		height: 23rpx;
	}

	.promotion {
		width: 100%;
		height: 1006rpx;
		background-image: url(../../static/images/invite_promotion_bg.png);
		background-size: cover;
		background-repeat: no-repeat;
		padding: 38rpx 95rpx 36rpx;
		font-size: 31rpx;
		font-family: Microsoft YaHei UI;
		font-weight: bold;
		color: #323232;

		.text {
			font-size: 25rpx;
			font-family: Microsoft YaHei UI;
			font-weight: bold;
			color: #323232;
		}
	}

	.invite_logo {
		width: 120rpx;
		height: 120rpx;
	}

	.promotion_code_box {
		width: 520rpx;
		height: 760rpx;
		background: #ffffff;
		border-radius: 25rpx;
		padding: 47rpx 80rpx 31rpx;
		text-align: center;

		.text {
			font-size: 31rpx;
			font-family: Microsoft YaHei UI;
			font-weight: bold;
			color: #d7443e;
		}

		.promotion_code {
			width: 360rpx;
			height: 360rpx;
		}
	}

	.copy {
		font-size: 31rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		text-decoration: underline;
		color: #2faeff;
	}

	.save {
		width: 330rpx;
		height: 70rpx;
		line-height: 70rpx;
		background: #fcc307;
		border-radius: 35rpx;
		font-size: 33rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #ffffff;
	}
</style>
